import React from 'react'
import Reflux from 'reflux'
import classNames from 'classnames'
import { Button, Form, Input } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { LdhInput } from '@biz/Components'

import { createAction } from './Action'
import Store from './Store'
import './style.less'

const FormItem = Form.Item

export default class LoginPage extends Reflux.Component {
  constructor(props) {
    super(props)
    this.action = createAction()
    this.store = new Store(props, this.action)
  }

  componentDidMount() {
    // 移动端禁用滚动
    if (window.innerWidth <= 768) {
      document.body.style.overflow = 'hidden'
      document.documentElement.style.overflow = 'hidden'
      document.body.style.position = 'fixed'
      document.body.style.width = '100%'
    }
  }

  componentWillUnmount() {
    // 恢复滚动
    document.body.style.overflow = ''
    document.documentElement.style.overflow = ''
    document.body.style.position = ''
    document.body.style.width = ''
    this.store.stopListeningToAll()
  }

  handleLogin(values) {
    this.action.login(values)
  }
  render() {
    let { errMsg, loading } = this.state
    return (
      <div className={classNames('login-page', errMsg && 'error')}>
        <Form
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={this.handleLogin.bind(this)}
        >
          <div className="title">登录</div>
          <div className="err-msg">{errMsg}</div>
          <FormItem
            name="account"
            rules={[{ required: true, message: '请输入账号' }]}
          >
            <LdhInput
              prefix={<UserOutlined className="icon" />}
              placeholder="账号"
              size="large"
            />
          </FormItem>
          <FormItem
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password
              prefix={<LockOutlined className="icon" />}
              placeholder="密码"
              size="large"
            />
          </FormItem>
          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
}
